css基础

头像
xmaksjdhw
    阅读 4 分钟

    引入

    <head>
    <link rel="stylesheet" href="base.css">
    <style>
        body{
            margin: 0;
        }
    </style>
</head>

    浏览器私有属性

    • chrome, safari

      • -webkit-

    • firefox

      • -moz-

    • IE

      • -ms-

    • opera

      • -o-

    @规则语法

    • @标识符 xxx;
    • @标识符 xxx {}

    • 常用

      • @media
      • @keyframes
      • @font-face

    选择器

    1. 简单选择器

      • 标签选择器
      p{color: red;}
      • 类选择器
      .className{color: red;}
      • id选择器
      .idName{color: red;}
      • 通配符选择器
      *{color: red;}
      • 属性选择器
      /*选中属性*/
[att]{color: red;}
[disabled]{color: red;}
/*属性att=val*/
[att=val]{color: red;}
[type=button]{color: red;}
/*包含属性att=val*/
[att~=val]{color: red;}
/*选中属性值等于val或val-开头的*/
[att|=val]{color: red;}
/*选中属性值以val开头的*/
[att^=val]{color: red;}
/*选中属性值以val结尾的*/
[att$=val]{color: red;}
/*选中属性值包含val的*/
[att*=val]{color: red;}
      • 伪类选择器
      a:link{color: gray;}
a:visited{color: red;}
/*以上两个只用于链接*/
a:hover{color: green;}
a:active{color: orange;}
      • :enabled
      • :disabled
      • :checked 单选框 复选框
      • :first-child
      • :last-child
      • :nth-child(even) 选中偶数项
      • :nth-child(3n+1) 选中第1，4，7...项
      • :nth-last-child(3n+1) 选中第1，4，7...项
      • ：only-child 选中只有一个子元素的项
      • :first-of-type
      • :last-of-type 其余同上
      dd:first-of-type{color: red;}
dt:first-of-type{color: red;}
      • :only-of-type
      span:only-of-type{color: red;}
      • 不常用的伪类
      • :empty
      • :root
      • :not()
      • :target
      • :lang()
    2. 伪元素选择器
    • ::first-letter 选中第一个字母
    • ::firt-line 选中第一行
    • ::before{content: "before"} 在某个元素之前插入content的内容
    • ::after{content: "after"}
    • ::selection 选中被选中的元素

    1. 组合选择器

      • 后代选择器
      .className p{color: red;}
      • 子选择器
      .className>p{color: red;}
      • 兄弟选择器
      /*选择h2之后的紧跟着p标签*/
.h2+p{color: red;}
/*选择h2之后的p标签*/
.h2~p{color: red;}

    2. 选择器分组

      h1,h2,h3{color: red;}

    css优先级

    1. 行内样式
    2. ID选择器
    3. 类 伪类和属性选择器
    4. 标签选择器和伪元素选择器

    css优先级改变

    1. 改变先后顺序

      • 优先级相同，后面的会覆盖前面的

    2. 提升优先级选择器

      • 在选择器前面加上标签选择器
    3. !important

    字体

    • font-size

      • px
      • em 基于父元素的倍数
      • 百分比
    • font-family

    • font-weight

      • normal | bold | bolder | lighter
      • 大多数字体只支持normal bold

    • font-style

      • normal
      • italic 斜体
      • oblique 倾斜（强制倾斜）

    • line-height

      • normal
      • px em

    对齐方式

    • text-alogn

      • left
      • right
      • center
      • justify 两端对齐

    • vertical-align

      • baseline
      • sub 下标
      • super
      • top
      • text-top
      • middle
      • bottom
      • text-bottom
      • 百分比
      • px

    • text-indent 缩进

      • px em 百分比
      • 2em缩进2个字

    格式处理

    • white-space 是否保留换行， 是否合并空格

      • normal 合并 会自动换行
      • nowrap 不换行
      • pre 保留换行 空格 tab
      • pre-wrap 在pre的基础上自动换行（常用）
      • pre-line 只保留还行

    • word-wrap

      • normal
      • break-word 长单词自动换行

    • word-break

      • normal
      • keep-all
      • break-all

    文本修饰

    • text-shadow
        /*x偏移，y偏移，模糊半径*/
    text-shadow: x, y, radio, #f00;

    • text-decoration

      • underline 下
      • overline 上
      • line-through 中

    高级设置

    • text-overflow

      • clip
      • ellipsis
      /*一行显示文本，超出显示...*/
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

    • cursor 鼠标形状

      • url
      • auto
      • default
      • none
      • help
      • pointer 手型
      • zoom-in 放大镜
      • zoom-out
      • move

    • 强制继承

      • inherit

    盒模型

    • 边距 边框 填充 内容
    • margin border padding content
    • width <length>| 百分比 | auto | inherit
    • height

    • 水平居中

      margin: 0 auto;

    • border

      • border-width
      • border-style solid | dashed | dotted
      • border-color

    • border-radius 圆角

      • x 方向半径4个值 / y方向半径4个值
      /*圆形*/
border-radius: 50%;

    • overflow

      • visible 默认
      • hidden 隐藏
      • scroll 滚动
      • auto 超出自动显示滚动条

    • box-sizing

      • content-box | border-box

    • box-shadow

      /*水平偏移 垂直偏移 模糊半径 阴影大小 颜色*/
box-shadow: 4px 6px 3px 2px red;
/*内阴影 水平偏移 垂直偏移 模糊半径 颜色*/
box-shadow: inset 4px 6px 3px red;

    • outline 轮廓， 不占空间

      • outline-width
      • outline-style solid | dashed | dotted
      • outline-color invert 和当前颜色相反

    背景

    • background-color

      • #fff
      • rgb()
      • rgba()
      • transparent 全透明
      • 始终在最底层

    • background-image

      • url()
      • 多张图片， 先写的在上层

    • background-repeat

      • repeat-x | repeat-y | repeat | space | round(缩放铺满) | no-repeat

    • background-attachment

      • scroll
      • local 背景随内容移动
      • fixed

    • background-position

      • left right center top bottom
      background-position: 10px 20px;
background-position: right 10px top 20px;
background-position: 20% 50%;
/*居中*/
background-position: center center;
background-position: 50% 50%;
      • 应用 图标精灵

    • linear-gradient() 线性渐变

      /*从上到下*/
background-image： linear-gradient(red, blue);
/*从下到上*/
background-image： linear-gradient(to top, red, blue);
background-image： linear-gradient(to right bottom, red, blue);
/*从下往上 0度*/
background-image： linear-gradient(0deg, red, blue);
/*三种颜色*/
background-image： linear-gradient(green, red, blue);

    • radial-gradient 径向渐变

      background-image： radial-gradient(closest-side, red, blue);
background-image： radial-gradient(farthest-side, red, blue);
background-image： radial-gradient(closest-corner, red, blue);
/*默认大小 最远距离*/
background-image： radial-gradient(farthest-corner, red, blue);
background-image： radial-gradient(circle 100px, red, blue);
    • repeating--gradient 重复 为linear radial

    • background-origin 位置相对点

      • padding-box
      • border-box
      • content-box

    • background-clip 裁剪

      • padding-box
      • border-box 默认
      • content-box

    • background-size

      • px 百分比
      • auto
      • cover 撑满整个容器
      • contain 撑满整个容器 但宽高不能超出
    css
    xmaksjdhw
    91 声望11 粉丝

    引用和评论

    推荐阅读
    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.4k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 938

    头像
    CSS炫酷光晕按钮特效

    南城FE赞 3阅读 858

    0 条评论
    得票最新